<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <home></home>
      
    </div>
    <script src="./vue.js"></script>
    <script>
        // properties 缩写 
        let CommonHead = {
          
            template:`
                <div>
                    <h1>子组件</h1>
                    {{ msg }}
                </div>
            `,
            data(){
                return {
                    msg:"我是子组件的数据"
                }
            },
            mounted(){
                console.log(this.$parent)
                setTimeout(()=>{
                    this.$parent.msg="子组件改变了你"
                },2000)
            }
           
        }
        let Home = {
            template:`
                <div>
                  父组件
                   <common-head ref="child"/>
                  <button @click="change">按钮</button>
                  {{msg}}
                </div>
            `,
            data(){
                return {
                    msg:"我是父组件的"
                }
            },
            mounted(){
                console.log(this.$children)
            },
            methods:{
                change(){
                    console.log( this.$refs )
                    let childComponent = this.$refs['child'];
                    childComponent.msg = "哈哈哈哈"
                }
            },
            components:{
                CommonHead 
            }
        }

     
        Vue.component("Home",Home);
        
        let vm = new Vue({
            el:"#app"
        })

    </script>
</body>
</html>